<template>
			<view  class="skeleton"  :class="{ animate: animate }" v-if="loading">
				<view class="skeleton-list pt-4">
					
				</view>
				<!-- 四个导航 -->
				<view class="skeleton-list">
					<view v-for="(item) in 4" :key="item" class="skeleton-avatar">
						
					</view>
				</view>
				
				<view class="header flex" style="margin-top: 100rpx;">
					<view class="avatar"></view>
					<view class="skeleton-title ml-1 py-1" style="width: 30%;"> </view>
				</view>
				<view class="mt-1 flex" v-for="item in 3" :key="item">
					<view class="skeleton-title" style="width: 20%;"></view>
					<view class="skeleton-title ml-1" style="width: 60%;"></view>
				</view>
				<view class="header flex mt-3 justify-between align-center">
					<view class="flex flex-1">
						<view class="avatar"></view>
						<view class="skeleton-title ml-1 py-1" style="width: 30%;"> </view>
					</view>
					<view class="skeleton-title" style="width: 20%;"> </view>
				</view>
				<view class="header flex mt-2">
					<view class="avatar"></view>
					<view class="skeleton-title ml-1 py-1" style="width: 30%;"> </view>
				</view>
				<view class="flex mt-2">
					<view class="skeleton-title mr-1 flex-1 img p-5" v-for="item in 3" :key="item">
                </view>
				</view>
				<block v-for="item in 2">
					<view class="skeleton-title" style="width: 20%;"> </view>
					<view class="skeleton-title" style="width: 60%;"> </view>
				</block>
				<view class="header flex mt-3">
					<view class="avatar"></view>
					<view class="skeleton-title ml-1 py-1" style="width: 30%;"> </view>
				</view>
				<view class="bottom">
					<view class="btn">
						
					</view>
				</view>
			</view>
				<view  v-else>
					<slot></slot>
				</view>
</template>
<script>
export default {
	props: {
		loading: {
			type: Boolean,
			default: true
		},
		titleWidth: {
			type: String,
			default: '30%'
		},
		animate: {
			type: Boolean,
			default: true
		},
	},
	data() {
		return {};
	},
};
</script>

<style scoped lang="less">
.skeleton {
	--bg-color: #f2f3f5;
	// --bg-color: red;
	--row-height: 15px;
	--row-margin-top: 12px;
	--title-border-radius: 2px;
	--text-height: 10px;
	padding: 0rpx 40rpx;
	margin-top: var(--status-bar-height);
	.skeleton-list{
		display: flex;
		justify-content: space-between;
	}
	.skeleton .status{
		background-color: #3C8EFF !important;
	}
	.skeleton-avatar{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: var(--bg-color);
	}
	.skeleton .bottom{
			position: fixed;
			width: 100%;
			right: 20px;
			bottom: 15;
			display: flex;
			justify-content: flex-end;
			z-index: 1;
			.btn{
				width: 300rpx;
				height: 90rpx;
				background-color: #3C8EFF;
				border-radius: 10rpx;
			}
	}
	
	.skeleton-title {
		background-color: var(--bg-color);
		height: var(--row-height);
		border-radius: var(--title-border-radius);
		margin-bottom: var(--row-margin-top);
	}
	.md {
		height: 50rpx;
	}
	
	.skeleton .nav{
		width: 20%;
		height: 100rpx;
	}
	.skeleton .avatar{
		width: 50rpx;
		height: 50rpx;
		background-color: var(--bg-color);
	}
}
.skeleton.animate {
		animation: skeleton-blink 1.2s ease-in-out infinite;
	}
	@keyframes skeleton-blink {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 0.6;
		}
		100% {
			opacity: 1;
		}
	}
</style>
